<template>
  <div class="service-wrap">
    <!-- <van-tabs type="card" style="margin-top: 10px;" title-active-color="white" color="coral">
        <van-tab title="政务"></van-tab>
        <van-tab title="公共服务"></van-tab>
        <van-tab title="便民"></van-tab>
        <van-tab title="交通出行"></van-tab>
        <van-tab title="文化教育"></van-tab>
    </van-tabs> -->

    <div class="box">
      <van-button type="warning" class="item" @click="selectButton()">政务</van-button>
      <van-button type="default" class="item">公共服务</van-button>
      <van-button type="default" class="item">便民</van-button>
      <van-button type="default" class="item">交通出行</van-button>
      <van-button type="default" class="item">文化教育</van-button>
    </div>
    <div style="display: flex;margin-top: 10px;">
      <div style="background-color: coral;width: 5px;height: 20px;margin-top: 10px;margin-left: 20px;"></div>
      <div style="margin-top: 5px;margin-left: 15px;font-size: 20px;">政务</div>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;">
      <div style="width: 31%;height: 40px;margin-top: 20px;margin-left: 5px;display: flex;" v-for="(item,index) in zhengwu" :key="index">
        <van-image width="35" height="35" :src="item.url" />
        <div style="font-size: 10px;width: 80px;">{{item.name}}</div>
      </div>
    </div>

    <div style="display: flex;margin-top: 20px;justify-content: space-between;align-items: center;">
      <div style="display: flex;align-items: center;">
        <div style="background-color: chocolate;width: 5px;height: 20px;margin-left: 20px;"></div>
        <div style="margin-left: 15px;font-size: 20px;">公共服务</div>
      </div>
      <van-button type="default" style="width: 80px;height: 20px;margin-right: 15px;">+ 更多</van-button>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;">
      <div style="width: 14%;height: 60px;margin-top: 20px;margin-left: 20px;display: flex;flex-direction: column;align-items: center;" v-for="(item,index) in gonggongfuwu" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div style="font-size: 10px;width: 60px;display: flex;justify-content: center;">{{item.name}}</div>
      </div>
    </div>

    <div style="display: flex;margin-top: 20px;">
      <div style="background-color: blueviolet;width: 5px;height: 20px;margin-top: 10px;margin-left: 20px;"></div>
      <div style="margin-top: 5px;margin-left: 15px;font-size: 20px;">便民</div>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;">
      <div style="width: 14%;height: 60px;margin-top: 20px;margin-left: 20px;display: flex;flex-direction: column;align-items: center;" v-for="(item,index) in bianmin" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div style="font-size: 10px;width: 60px;display: flex;justify-content: center;">{{item.name}}</div>
      </div>
    </div>

    <div style="display: flex;margin-top: 20px;">
      <div style="background-color: brown;width: 5px;height: 20px;margin-top: 10px;margin-left: 20px;"></div>
      <div style="margin-top: 5px;margin-left: 15px;font-size: 20px;">交通出行</div>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;">
      <div style="width: 14%;height: 60px;margin-top: 20px;margin-left: 20px;display: flex;flex-direction: column;align-items: center;" v-for="(item,index) in jiaotongchuxing" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div style="font-size: 10px;width: 60px;display: flex;justify-content: center;">{{item.name}}</div>
      </div>
    </div>

    <div style="display: flex;margin-top: 20px;">
      <div style="background-color: aqua;width: 5px;height: 20px;margin-top: 10px;margin-left: 20px;"></div>
      <div style="margin-top: 5px;margin-left: 15px;font-size: 20px;">文化教育</div>
    </div>
    <div style="background-color: white;margin: 10px;border-radius: 5px;display: flex;flex-wrap: wrap;padding-bottom: 20px;margin-bottom: 50px;">
      <div style="width: 14%;height: 60px;margin-top: 20px;margin-left: 20px;display: flex;flex-direction: column;align-items: center;" v-for="(item,index) in wenhuajiaoyu" :key="index">
        <van-image width="40" height="40" :src="item.url" />
        <div style="font-size: 10px;width: 60px;display: flex;justify-content: center;">{{item.name}}</div>
      </div>
    </div>

  </div>


</template>

<script>
export default {
  data() {
      return {
          nav: ['政务','公共服务','便民','交通出行','文化教育'],
          zhengwu: [
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '文明实践中心'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '社会治理服务中心'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '红鸢在线流动党员管理系统'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '政协履职服务平台'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '寿光蔬菜智慧管理服务平台'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '山东小企业和个体工商户服务网专栏'
            }
          ],
          gonggongfuwu: [
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '掌上民声'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '预约挂号'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '家政服务'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '公积金'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '求职招聘'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '供求发布'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '菜都鲜生'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '蔬菜问诊'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '银行预约'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '理发预约'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '我要资讯'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '我要预约'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '我要互动'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '我要投票'
            }
          ],
          bianmin: [
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '志愿者'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '红色物业'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '户外广告设置申报'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '建设银行'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '农商银行'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '招商银行'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '天气预报'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '新视窗便民'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '景点查询'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '网上社保'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '职工社保'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '居民社保'
            }
          ],
          jiaotongchuxing: [
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '公交线路'
            },
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '客车时间表'
            }
          ],
          wenhuajiaoyu: [
            {
              url: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2373349782,2634308475&fm=26&gp=0.jpg',
              name: '义务招生入学'
            }
          ]
      }
  },
  methods: {
  	selectNav(item) {

  	},
    selectItem(item) {
        // this.$router.push = ;
    },
    selectButton(obj) {
        //清空其它同类按钮选中颜色
        $('div[id^="SupendButton-"]').css("background-color", "#4cb0f9");//按钮原来颜色
        //点击后变色
        $(obj).css("background-color", "red");
    }
  }
}
</script>

<style lang="scss">
.service-wrap{
  background-color: #F8F8F8;
  padding-top: 10px;
  padding-bottom: 20px;
  .box{
    width: 100%;
    height: 60px;
    overflow-x: scroll;
    display: flex;
    .item{
      margin: 5px;
      width: 100px;
      height: 40px;
      flex-shrink: 0; //横向滚动时不压缩宽度
    }
    .active1{
      background-color: red;
    }
  }
}
::-webkit-scrollbar {
  display: none;
}
</style>
